<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorator="register.html">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="robots" content="all,follow">

    <meta name="viewport" content="width=device-width"/>
    <meta name="viewport" content="initial-scale=1.0,user-scalable=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes">


    <!-- Bootstrap CSS-->
    <link rel="stylesheet" href="../static/vendor/bootstrap/css/bootstrap.min.css">
    <!-- Font Awesome CSS-->
    <link rel="stylesheet" href="../static/vendor/font-awesome/css/font-awesome.min.css">
    <!-- Fontastic Custom icon font-->
    <link rel="stylesheet" href="../static/css/fontastic.css">
    <!-- Google fonts - Poppins -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:300,400,700">
    <!-- theme stylesheet-->
    <link rel="stylesheet" href="../static/css/style.default.css" id="theme-stylesheet">
    <!-- Custom stylesheet - for your changes-->
    <link rel="stylesheet" href="../static/css/custom.css">
    <!-- Favicon-->
    <link rel="shortcut icon" href="../static/img/favicon.ico">
    <script type="text/javascript" th:inline="javascript">
        /*<![CDATA[*/
        var basePath = [[${#httpServletRequest.getContextPath()}]];

        function getBaseUrl() {
            $("#basePathUrl").val(basePath);
            var a = $("#basePathUrl").val();
            return a;
        };


        //关闭当前页面
        function CloseWebPage() {

            if (navigator.userAgent.indexOf("MSIE") > 0) {

                if (navigator.userAgent.indexOf("MSIE 6.0") > 0) {    //适用于ie6不带提示关闭窗口

                    window.opener = null;

                    window.close();

                } else {

                    window.open('', '_top');         //ie7之后不提示关闭窗口

                    window.top.close();

                }

            } else if (navigator.userAgent.indexOf("Firefox") > 0) {        //Firefox不提示关闭窗口

                window.location.href = 'about:blank ';

            } else {

                window.opener = null;

                window.open('', '_self', '');        //其他浏览器

                window.close();

            }

        };

        /*]]>*/
    </script>

    <script type="text/javascript" th:inline="javascript">
        /*<![CDATA[*/
        var checkUserNameFlag = 1;//用户名是否重复, 0:未重复 1:重复
        function checkIsExist() {
            var userName = $.trim($("#userName").val());
            if (userName == "") {
                alert("用户名不能为空");
                return false;
            }
            // 获取baseUrl
            var baseUrl = getBaseUrl();
            $.ajax({
                type: "POST",   //http请求方式
                async: "false",
                cache: false,
                url: baseUrl + '/userManagement/checkUserName', //发送给服务器的url
                data: {userName: userName},//发送给服务器的参数
                dataType: "json",  //告诉JQUERY返回的数据格式(注意此处数据格式一定要与提交的controller返回的数据格式一致,不然不会调用回调函数complete)
                complete: function (msg) {
                    if (eval("(" + msg.responseText + ")")) {
                        checkUserNameFlag = 1;
                        $("#showResult").html("<font color='red'>用户名已存在</font>");
                    } else {
                        checkUserNameFlag = 0;
                        $("#showResult").html("");
                    }
                }//定义交互完成,并且服务器正确返回数据时调用回调函数
            });
        };

        function clearCss() {
            $("#showResult").html("");
        };


        function toRegister() {
            var userName = $.trim($("#userName").val());
            var password = $.trim($("#password").val());
            var confirmPassword = $.trim($("#confirmPassword").val());

            if (userName == "") {
                alert("用户名不能为空");
                return false;
            }
            if (password == "") {
                alert("密码不能为空");
                return false;
            }
            if (confirmPassword == "") {
                alert("确认密码不能为空");
                return false;
            }
            if (checkUserNameFlag != 0) {
                alert("用户名已重复请重新输入");
                return false;
            }
            if (password != confirmPassword) {
                alert("两次输入的密码不一致");
                return false;
            }
            if (userName.length < 6 || userName.length > 15) {
                alert("用户名长度不能小于6或者大于15");
                return false;
            }
            if (password.length < 6 || password.length > 15) {
                alert("密码长度不能小于6或者大于15");
                return false;
            }

            // 获取baseUrl
            var baseUrl = getBaseUrl();
            var adata = {"userName": userName, "password": password, "confirmPassword": confirmPassword};
            var registerData = JSON.stringify(adata);
            console.log(registerData);
            $.ajax({
                type: "POST",
                dataType: "json",//通过GET方式上传请求
                data: registerData, //上传的参数
                contentType: "application/json;charset=utf-8",
                async: false,
                url: baseUrl + "/userManagement/registerUser",     //请求的url。与后端@Request Mapping注解中的值一致。
                complete: function (data) {          //请求成功的回调函数
                    var jsonVar = JSON.parse(data.responseText);
                    console.log('status  :' + jsonVar.status + ' code :' + jsonVar.code);
                    if (jsonVar.status == 1 && jsonVar.code == "0000") {
                        alert(jsonVar.message);
                        console.log(baseUrl + "/userManagement/loginIndex");
                        debugger;
                        setTimeout(window.location.href = baseUrl + "/userManagement/loginIndex",3);
                    } else {
                        clearCss();
                        alert(jsonVar.message);
                    }
                }
            });
        };
        /*]]>*/
    </script>
</head>
<body>
<!-- 引入url -->
<input type="hidden" id="basePathUrl"/>
<div class="page login-page">
    <div class="container d-flex align-items-center">
        <div class="form-holder has-shadow">
            <div class="row">
                <!-- Form Panel    -->
                <div class="col-lg-6 bg-white">
                    <div class="form d-flex align-items-center">
                        <div class="content">
                            <form class="form-validate">
                                <div class="form-group">
                                    <input id="userName" type="text" name="userName" required
                                           data-msg="Please enter your username" class="input-material"
                                           maxlength="15" minlength="6"
                                           onkeyup="value=value.replace(/[^0-9a-zA-Z]/g,'')"
                                           onblur="checkIsExist();" onfocus="clearCss();">
                                    <label for="userName" class="label-material">User Name</label>
                                    <span id="showResult" name="showResult"></span></td>
                                </div>
                                <div class="form-group">
                                    <input id="password" type="password" name="password" required
                                           data-msg="Please enter your password"
                                           maxlength="15" minlength="6"
                                           onkeyup="value=value.replace(/[^0-9a-zA-Z]/g,'')"
                                           class="input-material">
                                    <label for="password" class="label-material">password </label>
                                </div>
                                <div class="form-group">
                                    <input id="confirmPassword" type="password" name="confirmPassword" required
                                           data-msg="Please enter your password"
                                           maxlength="15" minlength="6"
                                           onkeyup="value=value.replace(/[^0-9a-zA-Z]/g,'')"
                                           class="input-material">
                                    <label for="password" class="label-material">password </label>
                                </div>
                                <div class="form-group">
                                    <button id="regidter" type="submit" name="registerSubmit" onclick="toRegister()"
                                            class="btn btn-primary">Register
                                    </button>
                                </div>
                            </form>
                            <small>Already have an account?</small>
                            <a th:href="@{/userManagement/loginIndex}" class="signup">
                                Login</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="../static/vendor/jquery/jquery.min.js"></script>
<script src="../static/vendor/popper.js/umd/popper.min.js"></script>
<script src="../static/vendor/bootstrap/js/bootstrap.min.js"></script>
<script src="../static/vendor/jquery.cookie/jquery.cookie.js"></script>
<script src="../static/vendor/chart.js/Chart.min.js"></script>
<script src="../static/vendor/jquery-validation/jquery.validate.min.js"></script>
<!-- Main File-->
<script src="../static/js/front.js"></script>

</body>

</html>
